<template>
  <view>
    <view>
      <van-image height="400rpx" width="100vw" :src="courseInfo.courseLogo" />
    </view>
    <view>
      <van-tabs :active="active" @change="(e) => onChange(e)" color="#409eff">
        <van-tab title="课程简介"></van-tab>
        <van-tab title="课程章节"></van-tab>
        <van-tab title="课程评论"></van-tab>
      </van-tabs>
    </view>
    <view v-if="active === '课程简介'" class="course-info">
      <view class="course-title">
        <view>{{ courseInfo.courseName }}</view>
      </view>
      <view class="course-select" @click="changeSelect"
        ><van-rate v-model="courseInfo.collect" :count="1"></van-rate>
        <span>收藏</span>
      </view>
      <view class="course-introduce">{{ courseInfo.introduce }}</view>
    </view>
    <view v-if="active === '课程章节'" class="chapter-list">
      <view
        v-for="(item, index) in chapterList"
        :key="item.id"
        class="chapter-item"
        @click="toCharpter(item)"
      >
        <view>{{ `第${index + 1}章  ${item.chapterName}` }}</view>
      </view>
    </view>
    <view v-if="active === '课程评论'" class="chapter-list">
      <scroll-view class="comment-list-box" scroll-y>
        <view
          class="comment-item"
          v-for="item in commentList"
          :key="item.id"
          :item="item"
        >
          <view class="comment-left">
            <van-image height="80rpx" width="80rpx" :src="Avatar"></van-image>
          </view>
          <view class="comment-right">
            <view class="comment-name">{{ item.usersVO.nickname }}</view>
            <view class="comment-content">{{ item.commentText }}</view>
            <view class="comment-time">{{ item.gmtCreate }}</view>
          </view>
        </view>
        <van-empty v-if="!commentList.length" description="暂无评论数据" />
      </scroll-view>
      <van-button
        class="comment-btn"
        type="default"
        size="large"
        round
        color="#409eff"
        @click="showComment = true"
        >添加评论</van-button
      >
    </view>
    <van-dialog
      use-slot
      title="添加评论"
      :show="showComment"
      show-cancel-button
      confirm-button-open-type="addComment"
      @close="showComment = false"
      @confirm="addComment"
    >
      <van-field
        :value="commentValue"
        placeholder="请输入评论"
        :border="false"
        type="textarea"
        @change="changeComment"
      />
    </van-dialog>
  </view>
</template>

<script>
import {
  CourseDetail,
  QueryChapterByCourse,
  CollectCourse,
  CommentList,
  AddComment,
} from "@/api/course/course.js";
import Avatar from "@/static/image/avatar.png";

export default {
  name: "CourseDetail",
  data() {
    return {
      Avatar,
      commentValue: "",
      showComment: false,
      id: "",
      active: "课程简介",
      courseInfo: {},
      chapterList: [],
      commentList: [],
      commentQuery: {
        courseId: "",
        pageCurrent: 1,
        pageSize: 15,
      },
    };
  },
  onShow() {
    const id = uni.getStorageSync("courseId");
    this.id = id;
    this.getDetail();
    this.getChapter();
    this.getComment();
  },
  methods: {
    changeComment(e) {
      this.commentValue = e.detail;
    },
    addComment() {
      if (!this.commentValue) {
        wx.showToast({
          title: "请输入评论",
          icon: "none",
        });
        return;
      }
      AddComment({ commentText: this.commentValue, courseId: this.id }).then(
        (res) => {
          if (res.code === 200) {
            wx.showToast({
              title: "评论成功",
              icon: "success",
            });
            this.commentValue = "";
            this.showComment = false;
            this.getComment();
          }
        }
      );
    },
    toCharpter(row) {
      uni.setStorageSync("rourseList", row.periodRespList);
      uni.setStorageSync("chapterId", row.id);
      uni.navigateTo({
        url: `/pages/resourceList/index`,
      });
    },
    getComment() {
      this.commentQuery.courseId = this.id;
      CommentList(this.commentQuery).then((res) => {
        if (res.code === 200) {
          this.commentList = res.data.list || [];
          // this.commentList = this.commentList.reverse();
        }
      });
    },
    getChapter() {
      QueryChapterByCourse({ courseId: this.id }).then((res) => {
        if (res.code === 200) {
          this.chapterList = res.data.chapterRespList || [];
        }
      });
    },
    getDetail() {
      CourseDetail(this.id).then((res) => {
        if (res.code === 200) {
          this.courseInfo = res.data;
        }
      });
    },
    onChange(e) {
      console.log(e);
      this.active = e.detail.title;
    },
    changeSelect() {
      if (!this.courseInfo.collect) {
        CollectCourse({ courseId: this.id }).then((res) => {
          if (res.code === 200) {
            this.courseInfo.collect = 1;
            uni.showToast({
              title: "收藏成功",
              icon: "success",
            });
          }
        });
      } else {
        CollectCourse({ courseId: this.id }).then((res) => {
          if (res.code === 200) {
            this.courseInfo.collect = 0;
            uni.showToast({
              title: "取消收藏成功",
              icon: "success",
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.course-info {
  margin-top: 36rpx;
  padding: 0 40rpx;
}
.course-title {
  text-align: center;
  font-size: 32rpx;
  color: #303133;
}
.course-select {
  width: 100rpx;
  margin-top: 12rpx;
  float: right;
  font-size: 28rpx;
  color: #909399;
}
.course-introduce {
  margin-top: 60rpx;
  font-size: 28rpx;
  color: #909399;
  height: calc(100vh - 700rpx);
  overflow: auto;
  white-space: pre-wrap;
  width: 100%;
}
.chapter-list {
  margin-top: 16rpx;
  padding: 0 40rpx;
}
.chapter-item {
  padding: 28rpx 0;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
  font-size: 28rpx;
}
.comment-btn {
  position: fixed;
  bottom: 30rpx;
  width: calc(100vw - 80rpx);
}
.comment-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #ebeef5;
}
.comment-right {
  margin-left: 30rpx;
}
.comment-name {
  font-size: 30rpx;
  color: #606266;
}
.comment-content {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #909399;
}
.comment-list-box {
  height: calc(100vh - 650rpx);
}
.comment-time {
  margin-top: 10rpx;
  font-size: 22rpx;
  color: #c0c4cc;
}
</style>